// 初始化富文本编辑器
initEditor()

// 初始化裁切插件
// 1. 初始化图片裁剪器
var $image = $('#image')

// 2. 裁剪选项
var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
}

// 3. 初始化裁剪区域
$image.cropper(options)

getcatelist()
// 获取文章类别
function getcatelist() {
    $.ajax({
        url: "/my/article/cates",
        type: "GET",
        success: function (msg) {
            console.log(msg);
            let html = template('tpl-cate', msg)
            $('[name="cate_id"]').html(html)
            // 通知layui重新渲染
            layui.form.render()
        }
    })
}


let state = "已发布"
$('#btnSave2').on('click', function () {
    state = "草稿"
})

// 发布文章
$('#form-pub').on('submit', function (e) {
    e.preventDefault()
    // 收集参数
    let fd = new FormData($(this)[0])
    // 添加状态参数state
    fd.append('state', state)
    // 手动追加富文本编辑器的参数
    fd.append('content', tinyMCE.activeEditor.getContent())
    // 封面参数
    $image
        .cropper('getCroppedCanvas', {
            // 创建一个Canvas画布
            width: 400,
            height: 280
        })
        .toBlob(function (blob) {
            fd.append('cover_img', blob)
            // 发起请求新增文章
            $.ajax({
                url: '/my/article/add',
                data: fd,
                contentType: false,
                processData: false,
                type: "POST",
                success: function (msg) {
                    if (msg.status == 0) {
                        layer.msg('新增文章成功')
                    }
                }
            })
        })
})

// 换图
$('#btnChooseImage').on('click', function () {
    $('#coverFile').click()
})

$('#coverFile').on('change', function () {
    // 获取选中的图
    let f = $(this)[0].files[0]
    // URL
    // 把获取的图片对象转换成图片路径
    let u = URL.createObjectURL(f)
    // 把转化的路径赋值给img的src
    $image.cropper('destroy') //销毁旧的裁剪区域
        .attr('src', u)  //重新设置图片路径
        .cropper(options)  //重新初始化裁剪区域
})